<template>
    <div>
        <div id="market-app" class="page-container">
            <div class="page-content">
                <div class="page-view">
                    <div class="deposit-details">
                        <div class="content" id="products">
                            <div class="top_header">
                                <img src="/static//app//images/arrow_left.png" @click="back_to(CoinDetail.coin_type)" style="margin-left: 0.5rem; float: left; width: 16px; height: 26px" alt="">
                                <h4 style="text-align: center">提现
                                    <span @click="to_history(CoinDetail.coin_type)" style="float: right; margin-right: 0.5rem; color: #828a98; font-size: 18px; font-weight: normal">历史记录</span>
                                </h4>
                            </div>
                            <div class="chooseSymbol" style="margin-top: 0.5rem" v-on:click="openview()">
                                <img class="symbol-pic" :src="CoinDetail.img" />
                                <p class="symbol-asset">
                                    {{CoinDetail.name_upper}}
                                    <img class="rowright" src="/static/app/images/rowright.png"></p>
                            </div>
                            <div class="Available-Balance ng-scope" ng-if="curflag">
                                <p>可用资产</p>
                                <h4>{{wid_detail.amount}} {{CoinDetail.name_upper}}</h4>
                            </div>
                            <div class="withdraw-info">
                                <p class="tx">
                                    <span class="f-fl">提现金额</span>
                                    <span class="f-fr" v-on:click="open_Prompt()">
                                        <i class="font font-limit" style="font-size: 0.8rem;margin-right: 0.05rem;"></i>
                                        限额 &amp; 提示
                                    </span>
                                </p>
                                <div class="filed amount">
                                    <input id="amount" type="text" class="ipt" v-model="inputNum" value="" v-on:blur="check_input($event)" />
                                    <div class="Validform_checktip Validform_wrong ">{{wrongtext}}</div>
                                    <span class="wbtn" v-on:click="all_to_cash()">全部提现</span>
                                </div>
                                <p class="withdrawal-charge" style="height:0.7rem;">
                                    <span class="f-fl">
                                        手续费:
                                        <span style="color: #fff">{{fee}}</span>
                                        {{CoinDetail.name_upper}}
                                    </span>
                                    <span class="f-fr">
                                        实际到账:
                                        <span style="color: #fff">{{got}}</span>
                                        {{CoinDetail.name_upper}}
                                    </span>
                                </p>
                            </div>

                            <div class="withdraw-address">
                                <div class="filed">
                                    <div class="select-input">
                                        <span class="font" v-bind:class="{'font-shang':newAddress==true,'font-xia':newAddress==false}" v-on:click="change_address()"></span>
                                        <input class="addr-input" type="text" placeholder="地址" v-model="inputAddress" v-on:blur="check_address($event)">
                                        <ul v-bind:class="{addBtnHide:newAddress==true}">
                                            <li v-if="withdraw_address.length === 0">
                                                <p style="text-align: center; color: #7d848f !important">你还没有地址</p>
                                            </li>
                                            <li v-else v-for="(item, index) in withdraw_address" :key="index" :delete_id="item.id" @click.stop="push_address(index)">
                                                {{item.address}}
                                                <i id="delete" @click.stop="delete_withdraw_address(item.id)" style="z-index: 999; float: right; font-size: 0.85rem; margin-top: 0.6rem" class="fa fa-trash-o"></i>
                                            </li>
                                            <li class="newAddress" v-on:click="openAddressForm()">
                                                <i class="font font-add" style=" font-size: 0.9rem;margin-right: 0.05rem;"></i>
                                                使用新地址
                                            </li>
                                        </ul>
                                    </div>
                                    <p class="Validform_checktip"></p>
                                </div>

                                <input @click="withdraw_order()" id="isWithdrawal" style=" margin-top:7rem;height: 2.5rem; line-height: 2.5rem;" type="button" value="提现" class="button button-fill button-big" v-bind:class="{disabled:actBtn==false}" />
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

        <div id="testbox" type="text/html" style="display: none">
            <div id="dataList">
                <div class="search">
                    <img src="/static/app/images/bigmirror.png" />
                    <input placeholder="搜索" style="caret-color: #F0B90B;" />
                    <span onclick="layer.closeAll();">取消</span>
                </div>
                <ul class="allsymbols">
                    <li v-for="(item, index) in actData" :key="index" :id="item.coin_type">
                        <p>
                            <img :src="item.img" /> {{item.name_upper}}
                            <span>({{item.full_name}})</span>
                        </p>
                    </li>
                </ul>
            </div>
        </div>

        <script id="Prompt" type="text/html">
            <div class="limitPrompt">
                <div class="limitdiv">
                    <i class="font font-close close-popup" onclick="layer.closeAll()"></i>
                    <div class="limitBox-inner">
                        <p>
                            <i class="font font-limit"></i>限额 &amp; 提示</p>
                        <!-- <p>24h提现额度: 2 BTC </p>  -->
                        <!-- <p>今日已用: 0 BTC</p> -->
                    </div>

                    <div class="limitBox-desc">
                        <p id="wid_min">• 最小提现数量:0.44BNB. </p>
                        <p>• 请勿直接提现至众筹或ICO地址.我们不会处理未来代币的发放。 </p>
                        <p>• 提现请求申请成功后，请去邮箱点击链接确认本次提现请求。</p>
                    </div>
                </div>
            </div>
        </script>
        <script id="addressForm" type="text/html">
            <div id="formContent" class="formContent">
                <div class="item" style="padding: 0 15px;">
                    <div class="top-nav">
                        <img id="add_coin_img" src="/static/app/images/as_bnb.png">
                        <h4 id="add_name_upper">BNB</h4>
                        <p id="add_coin_type">Binance Coin</p>
                    </div>
                    <div class="item-body">
                        <form id="addAddress-form">
                            <div class="filed">
                                <input name="name" type="text" placeholder="备注标签" class="ipt txt remark_inp" v-model="markName" v-on:blur="check_mark($event)">
                                <p class="Validform_checktip Validform_wrong remark_p">{{mTxt}}</p>
                            </div>
                            <div class="filed">
                                <input name="address" type="text" placeholder="地址" class="ipt txt add_inp" v-model="mAddress" v-on:blur="check_mAddress($event)">
                                <p class="Validform_checktip Validform_wrong add_p">{{mATxt}}</p>
                            </div>
                            <div class="filed" style="margin-top: 36px">
                                <input type="button" value="确定" class="button button-fill button-big com_btn" v-on:click="set_address()" v-bind:class="{disabled:addBtn==false}" id="addAddress-btn" />
                            </div>
                        </form>
                    </div>
                </div>
                <i class="font font-close close-popup" onclick="layer.closeAll();"></i>
            </div>
        </script>
    </div>
</template>

<script>
export default {
  data() {
    return {
      assets: 1000, //资产
      assetsTyple: "BNB", //资产类型
      inputNum: "",
      wrongtext: "",
      newAddress: true,
      inputAddress: "",
      CoinDetail: {} /* 详细数据 */,
      coin_type: "" /* 类型 */,
      img_url: "" /* 图标 */,
      wid_detail: {} /* 提现页面内容 */,
      withdraw_address: [] /* 请求回来的地址 */,
      add_address: {} /* 新增的地址 */,
      actData: [],
      assetsTyple: "",
      markName: "",
      mTxt: "",
      mAddress: "",
      mATxt: ""
    };
  },
  methods: {
    openview: function() {
      layer.open({
        className: "depositlist",
        type: 1,
        content: $("#testbox").html(),
        anim: "up",
        style:
          "background: #12161C;color: #f3f3f3;position:fixed; left:0; top:0; width:100%; height:100%; border: none; -webkit-animation-duration: .5s; animation-duration: .5s;"
      });
      $(".allsymbols li").bind("click", function() {
        router.push({ path: "/withdrawal/" + this.id });
        window.location.reload();
      });
    },
    open_Prompt: function() {
      layer.open({
        className: "PromptBox",
        type: 1,
        content: $("#Prompt").html(),
        anim: "up",
        style:
          "background:none;color: #f3f3f3;position:fixed; left:0; top:0; width:100%; height:100%; border: none; -webkit-animation-duration: .5s; animation-duration: .5s;"
      });
      //this.drawQRcode();
      /* 提示最小提现 */
      $("#wid_min").html(
        "• 最小提现数量: &nbsp" +
          this.wid_detail.min +
          this.CoinDetail.name_upper
      );
    },
    check_input: function(e) {
      var input_val = e.target.value;
      // console.log(123)
      // console.log(this.inputNum)
      if (input_val == "" || input_val == null) {
        this.wrongtext = "请输入金额";
        this.inputNum = "";
      } else {
        this.wrongtext = "";
        if (input_val < 0) {
          this.wrongtext = "格式不正确";
          this.inputNum = "";
        }
        if (input_val > this.wid_detail.amount) {
          this.wrongtext = "余额不足";
          this.inputNum = "";
        }
        if (input_val < this.wid_detail.min) {
          this.wrongtext =
            "最少提现为" + this.wid_detail.min + this.CoinDetail.name_upper;
          this.inputNum = "";
        }
        //this.inputNum=input_val;
        //console.log(this.inputNum);
      }
    },
    change_address: function() {
      this.newAddress = !this.newAddress;
      this.get_withdraw_address(this.coin_type);
    },
    check_address: function(e) {
      var input_val = e.target.value;
      if (input_val == "" || input_val == null) {
        this.inputAddress = "";
      } else {
        //this.inputAddress=input_val;
        //console.log(this.inputNum+this.inputAddress);
      }
    },
    all_to_cash: function() {
      this.inputNum = this.wid_detail.amount;
    },
    openAddressForm: function() {
      var coin_type = this.coin_type;
      layer.open({
        className: "addressForm",
        type: 1,
        content: $("#addressForm").html(),
        anim: "up",
        style:
          "padding-top: 2.8rem;background: rgba(18, 22, 28, 1);box-sizing: border-box;color: #f3f3f3;position:fixed; left:0; top:0; width:100%; height:100%; border: none; -webkit-animation-duration: .5s; animation-duration: .5s;",
        success: elem => {
          //   console.log(elem);
          this.$data.assetsTyple = this.assetsTyple; //VUE间传值
          this.change_address();
        }
      });
      /* 把类型填到新增地址页 */
      /* 修改名字 */
      $("#add_name_upper").html(this.CoinDetail.name_upper);
      /* 修改全称 */
      $("#add_coin_type").html(this.CoinDetail.full_name);
      /* 修改图标 */
      $("#add_coin_img").attr("src", this.CoinDetail.img);
      /* 备注信息 */
      $(".item-body .remark_inp").bind("blur", function(e) {
        //   console.log(987987987);
        var m_val = e.target.value;
        if (m_val == "" || m_val == null) {
          $(".remark_p").html("该字段不能为空");
          // this.mTxt = "该字段不能为空";
        } else {
          // this.mTxt = "";
          $(".remark_p").html("");
        }
      });
      /* 地址 */
      $(".item-body .add_inp").bind("blur", function(e) {
        //   console.log(987987987);
        var m_val = e.target.value;
        if (m_val == "" || m_val == null) {
          $(".add_p").html("该字段不能为空");
          // this.mTxt = "该字段不能为空";
        } else {
          // this.mTxt = "";
          $(".add_p").html("");
        }
      });
      /* 确定按钮 */
      $(".item-body .com_btn").addClass("disabled");
      $(".item-body .com_btn").attr("disabled", true);
      $(".item-body .add_inp").bind("keyup", function(e) {
        var r_val = $(".item-body .remark_inp").val();
        var a_val = $(".item-body .add_inp").val();
        if (r_val == "" || a_val == "") {
          //   console.log(654654);
          $(".item-body .com_btn").addClass("disabled");
          $(".item-body .com_btn").attr("disabled", true);
        } else {
          //   console.log(11111111111111111);
          $(".item-body .com_btn").removeClass("disabled");
          $(".item-body .com_btn").attr("disabled", false);
        }
      });
      var coin_type = this.CoinDetail.coin_type;
      var vue_this_ = this;
      $(".item-body .com_btn").bind("click", function() {
        // console.log(121212123);
        var add = $(".item-body .add_inp").val();
        var det = $(".item-body .remark_inp").val();
        layer.closeAll();
        $.post(
          "/btc/add_withdraw_address",
          {
            coin_type: coin_type,
            address: add,
            detail: det
          },
          res => {
            // console.log(res);
            //成功提示
            vue_this_.inputAddress = add;
            layer.open({
              content: "新增地址成功",
              style: "color: #333",
              btn: "确定"
            });
          }
        );
      });
    },
    /* 根据类型获取图标和名称 */
    get_coin_type: function(coin_type) {
      /* 发送请求 */
      $.get(
        "/m/api/get_balance",
        {
          coin_type: coin_type
        },
        data => {
          this.CoinDetail = data;
          //   console.log(this.CoinDetail);
          /* 图标类型 */
          var coin_info = get_coin_info(data.coin_type);
          /* 图标样式 */
          this.CoinDetail.img = get_coin_icon_url(data.coin_type);
          this.CoinDetail.name_upper = coin_info.name_upper;
          this.CoinDetail.full_name = coin_info.cname;
        }
      );
    },

    /* 根据类型获取提现数据 */
    get_withdrawal: function(coin_type) {
      /* 发送请求 */
      $.post(
        "/btc/withdraw",
        {
          coin_type: coin_type
        },
        data => {
          // console.log(data);
          this.wid_detail = data;
        }
      );
    },

    /* 获取地址 */
    get_withdraw_address: function(coin_type) {
      $.post(
        "/btc/get_withdraw_address",
        {
          coin_type: coin_type
        },
        res => {
          // console.log(res);
          this.withdraw_address = res;
          this.push_address(res.length - 1);
        }
      );
    },

    /* 删除地址 */
    delete_withdraw_address: function(id) {
      /* 改变颜色 */
      $("#delete").css("color", "#f00b90f");
      /* 添加一个询问弹窗 */
      var content = "你确定要删除这个地址吗？";
      var style =
        "border:none; background-color:#fff; color:#333; border-radius:0px";
      layer.open({
        content: content,
        btn: ["确定", "取消"],
        style: style,
        yes: index => {
          $.post(
            "/btc/delete_withdraw_address",
            {
              coin_type: this.coin_type,
              id: id
            },
            res => {
              // console.log(res);
              // alert('删除地址成功！');
              this.get_withdraw_address(this.coin_type);
              layer.close(index);
            }
          );
        }
      });
    },

    /* 点击的时候把地址添加到地址栏上 */
    push_address: function(index) {
      // console.log(id);
      // console.log(this.withdraw_address[id].address);
      for (var i = 0; i < this.withdraw_address.length; i++) {
        if (i === index) {
          this.inputAddress = this.withdraw_address[i].address;
        }
      }
    },

    /* 点击提现按钮 */
    withdraw_order: function() {
      $.post(
        "/btc/withdraw_order",
        {
          address: this.inputAddress,
          coin_type: this.coin_type,
          amount: this.inputNum
        },
        res => {
          //成功提示
          layer.open(
            {
              content: "提现申请成功！",
              style: "color: #333",
              btn: "确定"
            },
            res => {
              location.reload();
            }
          );
        }
      );
    },

    /* 跳转到历史记录页面 */
    to_history: function(coin_type) {
      this.$router.push({ path: "/history/" + coin_type });
    },
    /* 返回按钮 */
    back_to: function(coin_type) {
      this.$router.push({ path: "/balances_detail/" + coin_type });
    },
    check_mark: function(e) {
      var m_val = e.target.value;
      if (m_val == "" || m_val == null) {
        this.mTxt = "该字段不能为空";
      } else {
        this.mTxt = "";
      }
    },
    check_mAddress: function(e) {
      var m_val = e.target.value;
      if (m_val == "" || m_val == null) {
        this.mATxt = "该字段不能为空";
      } else {
        this.mATxt = "";
      }
    },
    set_address() {
      this.add_withdraw_address();
      vue.$data.inputAddress = this.mAddress;
      layer.closeAll();
      this.$destroy();
    },

    /* 新增地址 */
    add_withdraw_address: function() {
      // console.log("xxx" + this.coin_type)
      $.post(
        "/btc/add_withdraw_address",
        {
          coin_type: this.coin_type,
          address: this.mAddress,
          detail: this.markName
        },
        res => {
          console.log(res);
          //成功提示
          layer.open(
            {
              content: "新增地址成功",
              style: "color: #333",
              btn: "确定"
            },
            res => {
              location.reload();
            }
          );
        }
      );
    },
    /* 根据类型获取图标和名称 */
    get_all_coin: function() {
      /* 发送请求，获取所有数据 */
      $.post("/btc/get_balances", {}, data => {
        //   console.log(data);d bs
        var show_data = [];
        for (var i = 0; i < data.length; i++) {
          var item = data[i];
          // console.log(item)
          var info = {};
          /* 图标类型 */
          var coin_info = get_coin_info(item.coin_type);
          // console.log(coin_info)
          /* 图标样式 */
          info.img = get_coin_icon_url(item.coin_type);
          // console.log("["+info.img+"]")
          info.coin_type = item.coin_type;
          info.amount = item.amount;
          info.name_upper = coin_info.name_upper;
          info.full_name = coin_info.cname;
          info.is_hidden = false;
          show_data.push(info);
        }
        this.actData = show_data;
      });
    }
  },
  created() {
    /* 根据URL地址获取参数 */
    this.coin_type = this.$route.params.coin_type;
    this.get_coin_type(this.coin_type);
    this.get_all_coin();
    this.get_withdrawal(this.coin_type);
    /* 调用函数，获取地址列表 */
    this.get_withdraw_address(this.coin_type);
  },

  computed: {
    actBtn: function() {
      if (this.inputNum != "" && this.inputAddress != "") {
        return true;
      } else {
        return false;
      }
    },
    addBtn: function() {
      if (this.markName != "" && this.mAddress != "") {
        return true;
      } else {
        return false;
      }
    },
    /* 手续费 */
    fee: {
      get: function() {
        return (this.wid_detail.total_fee =
          this.inputNum > 0
            ? this.inputNum * this.wid_detail.fee + this.wid_detail.fee_min
            : 0);
      }
    },
    /* 实际到账 */
    got: {
      get: function() {
        return this.inputNum > this.wid_detail.fee_min
          ? this.inputNum - this.fee
          : 0;
      }
    }
  },
  components: {}
};
</script>

<style>

</style>
